<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>MVC</title>
        <style type="text/css" >
            .view {
                width: 80vw;
                height: 50vh;
                margin: auto;
                border: 2px solid blue ;
            }
            .view .wrapper {
                display: flex;
                justify-content: space-between;
                margin: 10px ;
            }
            .view .wrapper input {
                flex-basis: 80%;
            }
            .view .wrapper button {
                flex-basis: 20%;
            }

            .view .list {
                margin: 10px;
                border: 2px solid gray;
                line-height: 30px;
            }

            .view .list>div {
                margin: 10px;
                border-bottom: 2px solid gray;
            }

            .view .list>div:last-child {
                border-bottom: none ;
            }
        </style>
    </head>
    <body>

        <div class="view">
            <div class="wrapper">
                <input type="text" >
                <button>发布</button>
            </div>
            <div class="list">
            </div>
        </div>

        <script type="text/javascript">
            (function(){

                function find( selector ){
                    return document.querySelector( selector );
                }

                const view = {
                    input: find( '.view .wrapper>input' ),
                    btn: find( '.view .wrapper>button') ,
                    list: find( '.view .list' ),
                    bind( controller ){
                        this.btn.addEventListener( 'click' , controller.publish , false );
                    },
                    render( comments ){
                        if( comments.length == 0 ) {
                            this.list.innerHTML = '暂无评论';
                            return ;
                        }
                        // 清空 list 中原有的内容
                        this.list.innerHTML = '' ;
                        // 清空 输入框 中的内容
                        this.input.value = '' ;
                        // 再将 commonts 数组中的内容显示到页面上
                        comments.forEach( c => {
                            let div = document.createElement( 'div' );
                            div.innerHTML = `${c.content} (${c.time})`;
                            // this.list.appendChild( div ); // Node.prototype.appendChild( node )
                            this.list.append( div ) ; // Element.prototype.append( node )
                        });
                    }
                }

                const model = {
                    // 用来存储数据的属性
                    comments: [],
                    // 用来操作数据的方法
                    manipulate( content ){
                        let comment = { content , time: new Date().toISOString() }
                        this.comments.push( comment );
                        // 每次操作数据后都要通知视图更新DOM
                        this.update();
                    },
                    // 用来更新视图的方法
                    update(){
                        view.render( this.comments );
                    }
                }

                const controller = {
                    publish(evt){
                        // 获取输入框中输入的数据
                        let content = view.input.value ;
                        model.manipulate( content );
                        console.log( model );
                    }
                }
                
                view.bind( controller );

                // 首次调用 model 的 update 以便于在 视图中显示默认数据
                model.update();

            })();
        </script>
        
    </body>
</html>